<!-- eslint-disable vue/multi-word-component-names -->
<template>
  <div>
    <!-- 搜索 -->
    <van-search
      style="width: 100%; height: 50px"
      show-action
      :label="city"
      placeholder="请输入小区或地址"
      background="#21b97a"
    >
      <template #left>
        <van-icon @click="$router.go(-1)" style="margin-right:5px" name="arrow-left" color="#fff" />
      </template>
      <!-- 自定义右侧 -->
      <template #action>
        <van-icon name="guide-o" color="#fff" />
      </template>
    </van-search>

    <!-- 下拉栏 -->
    <van-dropdown-menu active-color="#21b97a">
      <van-dropdown-item v-model="value1" :options="option1" />
      <van-dropdown-item v-model="value2" :options="option2" />
      <van-dropdown-item v-model="value3" :options="option3" />
      <van-dropdown-item v-model="value4" :options="option4" />
    </van-dropdown-menu>

    <!-- 城市列表 -->
    <CollectItems v-for="(item, index) in list" :key="index" :item="item"></CollectItems>

  </div>
</template>

<script>
import CollectItems from '@/components/CollectItems.vue'
import { getHouseList } from '@/api/article'
import { getCityToken } from '@/utils/storage'
export default {
  name: 'ListPage',
  components: {
    CollectItems
  },
  computed: {
    city () {
      return getCityToken()
    }
  },
  data () {
    return {
      value1: 0,
      value2: 'a',
      value3: 'd',
      value4: 'g',
      option1: [
        { text: '区域', value: 0 },
        { text: '新款商品', value: 1 },
        { text: '活动商品', value: 2 }
      ],
      option2: [
        { text: '方式', value: 'a' },
        { text: '好评排序', value: 'b' },
        { text: '销量排序', value: 'c' }
      ],
      option3: [
        { text: '租金', value: 'd' },
        { text: '好评排序', value: 'e' },
        { text: '销量排序', value: 'f' }
      ],
      option4: [
        { text: '筛选', value: 'g' },
        { text: '好评排序', value: 'h' },
        { text: '销量排序', value: 'i' }
      ],
      list: []
    }
  },
  async created () {
    // 未登录时 少了token
    const res = await getHouseList()
    console.log(res)
    this.list = res.body.filter((item, index) => index < 50)
    // this.list = res.body
  }
}
</script>

<style></style>
